<!-- 页面基础布局组件 - 提供应用的基础页面结构和布局 -->
<template>
  <!-- 主背景容器 -->
  <div class="page-layout">
    <!-- 侧边栏 -->
    <aside class="sidebar">
      <!-- 侧边栏内容区域 - 暂时留空，后续可根据需求添加 -->
      <slot name="sidebar"></slot>
    </aside>
    
    <!-- 主内容区域 -->
    <main class="content">
      <!-- 主内容插槽 -->
      <slot></slot>
    </main>
  </div>
</template>

<script setup lang="ts">
// 侧边栏页面布局组件
// 提供基本的页面结构，包含主背景、侧边栏和内容区域
</script>

<style scoped>
/* 主背景容器样式 */
.page-layout {
  display: flex;
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  overflow: hidden;
}

/* 侧边栏样式 */
.sidebar {
  width: 250px;
  height: 100%;
  background-color: #ffffff;
  border-right: 1px solid #e0e0e0;
  flex-shrink: 0;
  overflow-y: auto;
  /* 侧边栏具体样式后续可根据需求设计 */
}

/* 主内容区域样式 */
.content {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    width: 200px;
  }
}
</style>